<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">

  <title>表格测试</title>
    <script type='text/javascript'>
    
      window.devicePixelRatio=1;
      text=function(){
        let i=0,j=0;
        for( i=0;i<300;i++){
          for(j=0;j<100;j++){
            setTimeout(function(){xs.setCellAttrs(i,j,{ck:i,ss:'fdfd'})},1)
          }
        }
         
      }
    function load(){
      var rows10 = { len: 50 };
      for (var i = 0; i < rows10.len; i += 1) {
        rows10[i] = {
          cells: {
            0: { text: 'A-' + i },
            1: { text: 'B-' + i },
            2: { text: 'C-' + i },
            3: { text: 'D-' + i },
            4: { text: 'E-' + i },
            5: { text: 'F-' + i }
          }
        };
      }
      var rows = {
        len: 40,
        1: {
          cells: {
            0: { text: 'testingtest\ntestetst' },
            2: { text: 'testing' }
          }
        },
        2: {
          cells: {
            0: { text: 'render', style: 0 },
            1: { text: 'Hello' },
            2: { text: 'haha|a|c', merge: [1, 1] }
          }
        },
        8: {
          cells: {
            8: { text: 'border test', style: 0 }
          }
        }
      };
      countextmenu=function(r,c){ 
          var cell=xs.sheet.data.getCell(r,c);
          console.log(cell)
        //copy,cut,paste,paste-value,paste-format,divider,insert-row,insert-column,divider,devare-row,devare-column,devare-cell-text,hide,divider,validation,divider,cell-printable,cell-non-printable,divider,cell-editable,cell-non-editable,set-row-height
        var s=['repare-table',{key:'32432432',title:'432432432',handler:function(){
            console.log('32432');
            console.log(arguments)
        }}];
        
        if(c==-1){
          s.push("copy");
          s.push("paste");
          s.push("-")
          s.push("delete-row") ;         
          s.push("insert-row");
          s.push('add-row')
          s.push("hide");
          s.push("-")
          s.push("set-row-height");
        }else if(r==-1){
          s.push("copy");
          s.push("paste");
          s.push("-");
          s.push("insert-column");
          s.push('add-col')
          s.push("delete-column") ;
          s.push("hide");
          s.push("-")        
          s.push("set-col-width");
        }else{
          var a='copy,cut,paste,paste-value,paste-format,divider,delete-cell-text,divider,validation,divider,cell-printable,cell-non-printable,divider,cell-editable,cell-non-editable,undo,redo'.split(",");
          s=s.concat(a)
          
        }

        return s;
      };
     //是否显示头部及左侧表标签 , showColLabel:false,showRowLabel:false，默认显示
      // x_spreadsheet.locale('zh-cn');
      window.xs =new x_spreadsheet('#x-spreadsheet-demo', {copypasteModel:"value",showToolbar: true, showGrid: false,showBottomBar:true,
        // showColLabel: false,
        // showRowLabel: false,
        //width:"",
        height:document.body.clientHeight,
        showZeroNumber:false,
        //右键菜单
        contextMenuFilterfun:countextmenu})
        .loadData(tabledata)
        
      
      // xs.on('cell-selected', (cell, ri, ci) => {
      //     console.log('cell:', cell, ', ri:', ri, ', ci:', ci);
      //   }).on('cell-edited', (text, ri, ci) => {
      //     console.log('text:', text, ', ri: ', ri, ', ci:', ci);
      //   }).on("cell-click",function(cell,ri,ci){
      //     console.log('click:', text, ', ri: ', ri, ', ci:', ci);
      //   }).on("cell-edit-end",function(cell,text,ri,ci){
      //     console.log('cell-edit-end:',cell, text, ', ri: ', ri, ', ci:', ci);
      //   }).on("cell-dblclick",(cell,ri,ci)=>{
      //     console.log('cell-dblclick',arguments)
      //   });
        // xs.on("sheet-change",function(){console.log("sheet-change",arguments)});
         xs.setSelectCellByAlph("C8",["在1","在2","在3"]);
        xs.on("cell-edit-end",function(cell,text,ri,ci){
          if(text=='在1'){
            xs.setSelectCellByAlph("G11",["大1","大2","大3","大4"]);
          }else if(text=='在2'){
            xs.setSelectCellByAlph("G11",["中1","中2","中3","中4"]);
          }else if(text=='在3'){
            xs.setSelectCellByAlph("G11",["小1","小2","小3","小4"]);
          }
        })
      // setTimeout(() => {
      //   // xs.loadData([{ rows }]);
      //   xs.cellText(14, 3, 'cell-text').reRender();
      //   console.log('cell(8, 8):', xs.cell(8, 8));
      //   console.log('cellStyle(8, 8):', xs.cellStyle(8, 8));
      // }, 5000);
    }
     function getData(){
       let s=JSON.parse(document.getElementById("jsonara").value);
       if(s){
         xs.loadData(s);
       }
    }
    function saveData(){
      document.getElementById("jsonara").value=JSON.stringify(xs.getData())
      
    }
    
    var s=true;
    function reshow(){
      document.getElementById('x-spreadsheet-demo2').style.display=s?"block":'none'
      document.getElementById('x-spreadsheet-demo').style.display=s?"none":'block';
      // document.getElementById('x-spreadsheet-demo2').innerHTML="";
      // document.getElementById('x-spreadsheet-demo').innerHTML="";
      //load();
      s=!s;
    }
    function test(){

    }
    print=function(){
      xs.sheet.print.toPrint1(false,{lpadding:25,rpadding:25,tpadding:25,bpadding:25,orientation:1});
    }
    addsheet=function(){
      for(i=0;i<25;i++){
        xs.addSheet();
      }
    }
  </script>
<style>
  html,body{
    width: 100%;height: 100%;border:0px;margin:0px;padding: 0px;
  }
</style>

<link href="xspreadsheet.css" rel="stylesheet"></head>

  
  <body onload="load()"  >
    <div>
      <button onclick='saveData()'> 取数</button>
      <button onclick="getData()">赋值</button>
      <button onclick="reshow()">切换</button>
      <button onclick="test()">测试</button>
      <button onclick="print()">打印</button>
      <button onclick="addsheet()">增加</button>
      <textarea id='jsonara'></textarea>
    </div>
     <div id="x-spreadsheet-demo"></div>
     <div id="x-spreadsheet-demo2" style='display: none;'></div>
  <!--script type="text/javascript" src="https://unpkg.com/x-data-spreadsheet@1.0.20/dist/locale/zh-cn.js"></script-->
<script type="text/javascript" src="babel-polyfill.js"></script><script type="text/javascript" src="xspreadsheet.js"></script></body>
</html>
